<template>
  <el-form label-position="right"
           label-width="100px"
           :model="formData">
    <el-form-item :label="datum.title" v-for="datum of formOptions">
      <el-input
          v-model="formData[datum.name]"
          :placeholder="datum.placeholder"
          v-if="!datum.type||datum.type==='input'"></el-input>
      <el-select
          v-model="formData[datum.name]"
          :placeholder="datum.placeholder"
          class="input"
          v-else-if="datum.type==='select'">
        <el-option
            v-for="item in datum.options||[]"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-radio-group
          v-model="formData[datum.name]"
          v-else-if="datum.type==='radio'">
        <el-radio
            :label="item.value"
            v-for="item in datum.options||[]">
          {{ item.label }}
        </el-radio>
      </el-radio-group>

      <PictureUpload
          :max="datum.maxLength||Infinity"
          :value="datum.value"
          v-else-if="datum.type==='image'"></PictureUpload>
      <div v-else-if="datum.type==='map'">
        <el-input
            style="width: 185px"
            class="m_r15"
            v-model="formData[datum.name]"
            :placeholder="datum.placeholder" readonly></el-input>
        <el-button size="mini" type="primary" round @click="showMap=!showMap">打开地图</el-button>
      </div>
    </el-form-item>
  </el-form>
  <TMap v-model:value="showMap"></TMap>
</template>

<script lang="ts">
import {defineComponent, PropType} from 'vue'
import PictureUpload from '@/components/PictureManager/PictureUpload.vue'
import {FormOptions} from '@/interface/FormInterface'
import {useFormOptionsToFormData} from '@/hooks/FormHooks'
import TMap from '@/components/qqMap/TMap.vue'

export default defineComponent({
  name: "BaseInfo",
  components: {
    TMap,
    PictureUpload
  },
  props: {
    formOptions: {
      type: Array as PropType<FormOptions[]>
    }
  },
  data() {
    return {
      showMap: false,
    }
  },
  setup(props, ctx) {
    const formOptions: FormOptions[] = [
      {title: '名称', name: 'name', type: 'input', placeholder: '请输入酒店名称'},
      {title: '地址', name: 'address', type: 'map', placeholder: '请选择地址'},
      {title: '主题', name: 'theme', type: 'select', placeholder: '请选择酒店主题'},
      {title: '类型', name: 'type', type: 'select', placeholder: '请选择酒店类型'},
      {
        title: '早餐',
        name: 'breakfast',
        type: 'radio',
        value: '0',
        placeholder: '是否有早餐',
        options: [{label: '有', value: '1'}, {label: '无', value: '0'}]
      },
      {
        title: 'WIFI',
        name: 'wifi',
        type: 'radio',
        value: '1',
        placeholder: '是否有WIFI',
        options: [{label: '有', value: '1'}, {label: '无', value: '0'}]
      },
      {
        title: '停车场',
        name: 'Parking ',
        type: 'radio',
        value: '1',
        placeholder: '是否有停车场',
        options: [{label: '有', value: '1'}, {label: '无', value: '0'}]
      },
      {title: '简图', name: 'image', type: 'image', placeholder: '是否有停车场', maxLength: 5},
    ]
    return {
      ...useFormOptionsToFormData(formOptions, ctx)
    }
  }
})
</script>

<style scoped>

</style>
